<script setup lang="ts">
// 导入主题切换组件
</script>

<template>
  <n-message-provider>
    <div class="min-h-screen transition-colors duration-300 dark:bg-gray-900">
      <!-- 简单的导航栏 -->
      <header class="border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-sm">
        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
          <h1 class="text-lg font-bold text-gray-900 dark:text-white">
            Nuxt项目模板
          </h1>
          <div class="flex items-center space-x-4">
            <!-- 主题切换组件 -->
            <ThemeSwitcher />
          </div>
        </div>
      </header>

      <!-- 主要内容区域 -->
      <main class="container mx-auto px-4 py-6">
        <slot />
      </main>
    </div>
  </n-message-provider>
</template>

<style scoped>
/* 添加过渡效果 */
.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
</style>
